import React from 'react';
import FromRule from './Main';
import { Button } from 'antd';
import { WeaDialog, WeaLocaleProvider } from 'ecCom';
import { inject, observer } from "mobx-react";

const { getLabel } = WeaLocaleProvider;

@inject('edcFormRuleStore')
@observer
export default class RuleDialog extends React.Component {
  state = {
    isSaving: false
  };

  getArea() {
    const { offsetWidth, offsetHeight } = document.body;
    const maxWidth = 1000;
    const width = offsetWidth * 0.8;

    return {
      width: width > maxWidth ? maxWidth : width,
      height: offsetHeight * 0.8
    };
  }

  onSave = () => {
    const { edcFormRuleStore: store, onCancel } = this.props;

    this.setState({ isSaving: true });
    store.onSave().then(() => {
      onCancel();
      this.setState({ isSaving: false });
    });
  }

  render() {
    const { isSaving } = this.state;
    const { width, height } = this.getArea();
    const { appid, visible, edcFormRuleStore, onCancel } = this.props;

    return (
      <WeaDialog
        title={getLabel(503913,'规则')}
        icon={"icon-coms02-Data-center"}
        iconBgcolor = "#1a57a0"
        hasScroll
        visible={visible}
        onCancel={onCancel}
        style={{ width, height }}
        buttons={[
          <Button type='primary' 
            icon={isSaving && 'loading'}
            onClick={this.onSave}
          >
            {getLabel(503911,'保存规则')}
          </Button>,
          <Button onClick={onCancel}>{getLabel(31129,'取消')}</Button>,
        ]}
      >
        {visible && <FromRule appid={appid} store={edcFormRuleStore} />}
      </WeaDialog>
    );
  }
}